<template>
  <div>
    <public-modal
      width="800px"
      :title="title"
      modalStyle="visitor-detailModal"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content" style="padding: 20px">
        <div class="search-group">
          <div class="input-wrap">
            <div class="label">选择年份:</div>
            <div class="input-item">
              <a-date-picker
                mode="year"
                placeholder="请选择年份"
                format="YYYY"
                value-format="YYYY-MM-DD"
                v-model="value"
                style="width: 100%"
                :open="yearShowOne"
                @openChange="openChangeOne"
                @panelChange="panelChangeOne"
              />
            </div>
          </div>

          <div class="btn-wrap">
            <a-button class="searchBtn" @click="searchHandle()" type="primary"> 搜索 </a-button>
            <a-button class="resetBtn" @click="resetHandle()" type="primary"> 重置 </a-button>
          </div>
        </div>

        <div class="table-wrap f1">
          <a-table
            rowKey="id"
            class="tableList"
            :columns="columns2"
            :dataSource="dataSource2"
            :pagination="ipagination2"
            @change="handleTableChange2"
          >
            <template #signedCount="record">
              <span style="color: #47e829" class="cursor" id="signedCount">{{ record }}</span>
            </template>
            <template #notSignedCount="record">
              <span style="color: #47e829" class="cursor" id="notSignedCount">{{ record }}</span>
            </template>
          </a-table>
        </div>
      </div>
      <div slot="footer"></div>
    </public-modal>
    <sign-page ref="signPage" @close="onClose"></sign-page>
    <not-sign-page ref="notSignPage"></not-sign-page>
  </div>
</template>
<script>
import publicModal from '@/components/publicModal'
import { documentAdd, documentEdit } from '@/api/document'
import { getAction } from '../../../api/manage'
import signPage from './signPage'
import notSignPage from './notSignPage'

export default {
  name: 'cancelModel',
  components: { publicModal, signPage, notSignPage },
  data() {
    return {
      queryParam: {
        memo: '',
        documentName: '',
      },
      title: '文书模板',
      records: {},
      publicVisible: false,
      //年度计划的打开关闭状态，true为打开，false为关闭
      yearShowOne: false,
      queryParam2: {},
      dataSource2: [],
      columns2: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '年份',
          dataIndex: 'year',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '已签署企业',
          dataIndex: 'signedCount',
          scopedSlots: { customRender: 'signedCount' },
          ellipsis: true,
          align: 'center',
          customCell: this.customCell,
        },
        {
          title: '未签署企业',
          dataIndex: 'notSignedCount',
          scopedSlots: { customRender: 'notSignedCount' },
          ellipsis: true,
          align: 'center',
          customCell: this.customCell,
        },
      ],
      ipagination2: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      value: '',
      documentName: '',
    }
  },
  mounted() {},
  methods: {
    customCell(record, rowIndex, column) {
      // column add from 3.0
      return {
        on: {
          click: (event) => {
            // 当前点击的单元格
            let dataIndex = event.target.id
            // let dataIndex = event.target.__vue__.column.dataIndex

            if (dataIndex == 'signedCount') {
              this.$refs.signPage.show({
                id: this.queryParam2.documentId,
                year: record.year,
                documentName: this.documentName,
              })
            } else if (dataIndex == 'notSignedCount') {
              this.$refs.notSignPage.show({
                id: this.queryParam2.documentId,
                year: record.year,
                documentName: this.documentName,
              })
            }
          },
        },
      }
    },
    show(records) {
      this.records = records
      this.title = `《${records.documentName}》签署情况统计表`
      if (records && records.id) {
        this.queryParam2 = { ...records, documentId: records.id }
        this.documentName = records.documentName
      }
      this.searchHandle()
      this.publicVisible = true
    },

    async handleOk() {
      if (this.queryParam.documentName == '') {
        this.$message.error('请填写文书名称')
        return
      }

      if (this.queryParam.memo == '') {
        this.$message.error('请填写备注信息')
        return
      }

      if (this.title == '新增文书模板') {
        let res = await documentAdd(this.queryParam)
        this.$message.success(res.message)
        this.publicVisible = false
        this.cancel()
        this.$emit('refresh')
      } else {
        this.queryParam.id = this.records.id
        let res = await documentEdit(this.queryParam)
        this.$message.success(res.message)
        this.publicVisible = false
        this.cancel()
        this.$emit('refresh')
      }
    },
    cancel() {
      this.publicVisible = false
      this.title = '文书模板'
      this.queryParam = {
        memo: '',
        documentName: '',
      }
    },

    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      //status是打开或关闭的状态
      if (status) {
        this.yearShowOne = true
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.value = this.$moment(value._d).format('YYYY')
      this.queryParam2.year = this.$moment(value._d).format('YYYY')
      this.yearShowOne = false
    },

    handleTableChange2(pagination, filters, sorter) {
      // console.log(pagination, filters, sorter)
      this.queryParam2.pageNo = pagination.current
      this.queryParam2.pageSize = pagination.pageSize
    },

    resetHandle() {
      let documentId = this.queryParam2.documentId
      this.queryParam2 = { documentId }
      this.searchHandle()
    },

    async searchHandle() {
      let { result } = await getAction('/sys/document_company/statistics_page', this.queryParam2)
      this.dataSource2 = result.records
      this.ipagination.total = result.total
    },

    onClose() {
      this.publicVisible = false
    },
  },
}
</script>
